<script lang="ts" setup>
import { computed } from 'vue';

import { MdiEdit } from '@vben/icons';
import { preferences, usePreferences } from '@vben/preferences';

import { Button, Radio, RadioGroup } from 'ant-design-vue';

const props = defineProps({
  form: {
    type: Object,
    default: () => ({}),
  },
  editStatus: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits([
  'update:form',
  'update:editStatus',
  'init',
  'submit',
]);

// 是否允许选择
const isAllowRadio = [
  {
    value: true,
    label: '允许',
  },
  {
    value: false,
    label: '不允许',
  },
];

const formData = computed({
  get() {
    return props.form;
  },
  set(newValue) {
    emit('update:form', newValue);
  },
});

const edit = computed({
  get() {
    return props.editStatus;
  },
  set(newValue) {
    emit('update:editStatus', newValue);
  },
});

// 通知父组件初始化一些接口
const init = () => {
  emit('init');
};

// 取消编辑事件
const cancelEdit = (key: string) => {
  edit.value[key] = false;
  init();
};

// 打开编辑事件 并关闭其他的编辑状态
const openEdit = (key: string) => {
  edit.value[key] = true;
  Object.keys(edit.value).forEach((item) => {
    if (item !== key && edit.value[item]) {
      cancelEdit(item);
    }
  });
};

const submit = async () => {
  emit('submit', 'childPolicy');
};

// 使用 usePreferences 函数获取主题相关信息
const { isDark } = usePreferences();

// 计算当前主题
const currentTheme = computed(() => {
  if (preferences.theme.mode === 'auto') {
    return isDark.value ? 'dark' : 'light';
  }
  return preferences.theme.mode;
});

// 触发单选事件
const radioChange = (e: any, key: keyof typeof formData.value) => {
  formData.value[key] = e.target.value;
};
</script>

<template>
  <div>
    <div v-if="!edit.childPolicy" class="px-4 pb-6">
      <div class="flex items-center justify-between py-1">
        <div class="text-xl font-bold">儿童政策</div>
        <div>
          <Button
            class="flex h-auto items-center px-0 py-3"
            type="link"
            @click="openEdit('childPolicy')"
          >
            <template #icon>
              <MdiEdit class="icon mr-1" />
            </template>
            编辑
          </Button>
        </div>
      </div>
      <div>
        <div class="text-xl">是否可接待儿童</div>
        <div>
          {{
            isAllowRadio.find((item) => item.value === formData.isAllowChildren)
              ?.value
              ? '可接待儿童，默认所有客房均可接待儿童。'
              : '不接待儿童，默认所有客房均不可接待儿童。'
          }}
        </div>
      </div>
    </div>
    <div v-else class="px-4 pb-6">
      <div
        class="card-box sticky top-[-21px] z-[10] flex items-center justify-between rounded-none border-none py-4"
      >
        <div class="text-xl font-bold">儿童政策</div>
        <div class="flex items-center">
          <Button
            class="flex h-auto items-center px-5 py-2"
            @click="cancelEdit('childPolicy')"
          >
            取消
          </Button>
          <Button
            class="ml-2 flex h-auto items-center px-5 py-2"
            type="primary"
            @click="submit"
          >
            保存
          </Button>
        </div>
      </div>
      <div>
        <div class="text-xl">是否可接待儿童</div>
        <div>是否可携带18岁以下未成年人</div>
        <div class="pt-2">
          <RadioGroup
            :value="formData.isAllowChildren"
            @change="radioChange($event, 'isAllowChildren')"
          >
            <div
              v-for="(item, index) in isAllowRadio"
              :key="index"
              class="relative py-1"
            >
              <Radio :class="[currentTheme]" :value="item.value">
                {{ item.label }}
              </Radio>
            </div>
          </RadioGroup>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.icon {
  color: hsl(var(--primary));
}

.light {
  color: hsl(var(--card-foreground));
}
</style>
